<template>
  <div class="detail">
    <van-sticky>
      <van-nav-bar title="文章详情" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <header class="biaoTi">
      <h4>
        {{ detailObj.title }}
      </h4>
    </header>
    <div class="zuoZhe">
      <div class="zuoZhe-left">
        <div class="zuoZhe-img">
          <img :onerror="pic" :src="detailObj.aut_photo" alt="" />
        </div>
        <div class="zuoZhe-name">
          <div class="mingCheng">{{ detailObj.aut_name }}</div>
          <div class="faBuTime">{{ detailObj.pubdate | timefilter }}</div>
        </div>
      </div>
      <div class="zuoZhe-right">
        <van-button
          v-if="detailObj.is_followed"
          @click="quXiaoGuanZhu"
          type="info"
          >取消关注</van-button
        >
        <van-button v-else @click="gaunZhuZuoZhe" type="info">+关注</van-button>
      </div>
    </div>
    <hr />
    <div class="neiRong" v-html="detailObj.content"></div>
    <div class="zan">
      <van-button
        v-if="detailObj.attitude === -1 || detailObj.attitude === 0"
        @click="zanWenZhang"
        type="default"
        >🖤点赞</van-button
      >
      <van-button
        v-else-if="detailObj.attitude === 1"
        @click="BuZanWenZhang"
        type="default"
        >💖已点赞</van-button
      >
      <van-button
        v-if="detailObj.attitude === -1 || detailObj.attitude === 1"
        @click="buXixHuanWenZhang"
        type="default"
        >🚮不喜欢</van-button
      >
      <van-button
        v-else-if="detailObj.attitude === 0"
        @click="quXiaoBuXixHuanWenZhang"
        type="default"
        >👎已不喜欢</van-button
      >
    </div>
    <!-- 👇当前文章评论 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="(item, index) in plArr" :key="index" class="pingLun">
        <div class="pingLun-img">
          <img :onerror="pic" :src="item.aut_photo" alt="" />
        </div>
        <ul class="pingLunText">
          <li class="pltop">
            <span class="pltop-name">{{ item.aut_name }}</span>
            <span
              v-if="item.like_count > 0"
              @click="quXiaoDianZanpl(item.com_id)"
              class="pltop-like"
              >👍{{ item.like_count }}</span
            >
            <span v-else @click="dianZanPingLun(item.com_id)" class="pltop-like"
              >👊{{ item.like_count }}</span
            >
          </li>
          <li class="plcenter">
            {{ item.content }}
          </li>
          <li class="plbottom">
            <span class="plbottom-time">{{ item.pubdate | timefilter }}</span>
            <van-button type="default" @click="kaiQipl(item.com_id, item)"
              >{{ item.reply_count }} 回复
            </van-button>
          </li>
        </ul>
      </div>
    </van-list>
    <van-field
      v-model="sms"
      center
      clearable
      label="说点什么"
      placeholder="请输入评论内容"
    >
      <template #button>
        <van-button @click="tianJiaPingLun" size="small" type="primary"
          >发送</van-button
        >
      </template>
    </van-field>
    <van-popup
      closeable
      round
      v-model="show"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <!-- 当前评论👇 -->
      <div class="dangQianpl">
        <p style="margin-left: 22px; margin-top: 6px; font-size: 14px;">
          当前评论
        </p>
      </div>
      <!-- 当前评论的信息👇 -->
      <div
        class="dangQian"
        style="display: flex;
                justify-content: space-between;
                padding: 22px;
                padding-bottom: 0px;
                font-size: 12px; border-bottom: 1px solid #000000"
      >
        <div
          class="pingLun-img-z"
          style="width: 80px;
                  height: 50px;
                  border-radius: 50%;
                  overflow: hidden;
                  margin-right: 4px;"
        >
          <img
            :onerror="pic"
            :src="dqpl.aut_photo"
            alt=""
            style="width: 100%;
                    height: 100%;"
          />
        </div>
        <ul class="pingLunText-z">
          <li
            class="pltop-z"
            style="display: flex;
                justify-content: space-between;"
          >
            <span
              class="pltop-name-z"
              style="font-size: 14px;
                  color: #a1a1a1;"
              >{{ dqpl.aut_name }}</span
            >
            <span class="pltop-like-z" style="font-size: 14px;"
              >❤{{ dqpl.like_count }}</span
            >
          </li>
          <li class="plcenter-z" style="font-size: 16px; width: 278px;">
            {{ dqpl.content }}
          </li>
          <li class="plbottom-z">
            <span
              class="plbottom-time-z"
              style="line-height: 44px;
                  margin-right: 10px;"
              >{{ dqpl.pubdate | timefilter }}</span
            >
          </li>
        </ul>
      </div>
      <!-- 👆当前评论的信息 -->
      <!-- 评论的回复👇 -->
      <div class="dangQianhf">
        <p style="margin-left: 22px; margin-top: 6px; font-size: 14px;">
          评论的回复
        </p>
      </div>
      <!-- 👇评论的回复 -->
      <div
        class="huiFu"
        style="display: flex;
                justify-content: space-between;
                padding: 22px;
                padding-bottom: 0px;
                font-size: 12px; border-bottom: 1px solid #000000"
        v-for="(item, index) in dangQianplArr"
        :key="index"
      >
        <div
          class="pingLun-img-h"
          style="width: 80px;
                  height: 50px;
                  border-radius: 50%;
                  overflow: hidden;
                  margin-right: 4px;"
        >
          <img
            :onerror="pic"
            :src="item.aut_photo"
            alt=""
            style="width: 100%;
                    height: 100%;"
          />
        </div>
        <ul class="pingLunText-h">
          <li
            class="pltop-h"
            style="display: flex;
                justify-content: space-between;"
          >
            <span
              class="pltop-name-h"
              style="font-size: 14px;
                  color: #a1a1a1;"
              >{{ item.aut_name }}</span
            >
            <span class="pltop-like-h" style="font-size: 14px;"
              >❤{{ item.like_count }}</span
            >
          </li>
          <li class="plcenter-h" style="font-size: 16px; width: 278px;">
            {{ item.content }}
          </li>
          <li class="plbottom-h">
            <span
              class="plbottom-time-h"
              style="line-height: 44px;
                  margin-right: 10px;"
              >{{ item.pubdate | timefilter }}</span
            >
          </li>
        </ul>
      </div>
      <!-- 评论的回复👆 -->
      <!-- 对评论进行回复👇 -->
      <div class="bottom-huifu" style="margin-top: 48px;">
        <van-field
          v-model="sms2"
          center
          clearable
          label="怼两句"
          placeholder="请输入评论内容"
        >
          <template #button>
            <van-button @click="huiFuDangQianPl" size="small" type="primary"
              >发送</van-button
            >
          </template>
        </van-field>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  getDetailApi,
  guanZhu,
  quGuan,
  dianZanWenZhang,
  quXiaoZan,
  buXuHuan,
  quXiaoBuXiHuan,
  getPingLun,
  setPingLun,
  getZanpl,
  clearDianZan
} from '../../api/detail'
export default {
  data () {
    return {
      id: '',
      sms: '',
      sms2: '',
      show: false,
      detailObj: {},
      // 👇获取作者ID
      zuoZheId: '',
      wenZhangId: '',
      // 👇获取评论的返回值
      plObj: {},
      // 👇评论的数量
      plArr: [],
      // 👇当前评论的回复数量
      dangQianplArr: [],
      // 👇当前评论Id
      plId: '',
      // 当前评论
      pic:
        'this.src="' +
        'https://img01.yzcdn.cn/vant/empty-image-error.png' +
        '"',
      dqpl: {},
      loading: false,
      finished: false
    }
  },
  created () {
    this.id = this.$route.params.artid

    // 👇文章详情👇
    this.wzxq()
    this.deDaoPingLun()
  },
  methods: {
    onClickLeft () {
      this.$router.push('/index')
    },
    async kaiQipl (dangQianPlId, item) {
      this.plId = dangQianPlId
      this.show = true
      // 获取当前评论的回复👇
      var res = await getPingLun({
        type: 'c',
        // 👇评论Id👇
        source: this.plId.toString()
      })
      this.dangQianplArr = res.data.results
      window.console.log(this.dangQianplArr)
      this.dqpl = item
    },
    async wzxq () {
      var res = await getDetailApi(this.id)
      // window.console.log(res)
      this.detailObj = res.data
      this.zuoZheId = res.data.aut_id
      this.wenZhangId = res.data.art_id
      // window.console.log(this.detailObj)
    },
    // 关注作者👇
    async gaunZhuZuoZhe () {
      // this.detailObj.is_followed文章作者是否被当前用户关注了，true就是被关注了
      this.detailObj.is_followed = true
      await guanZhu({
        // 发送要关注作者的Id
        target: this.zuoZheId
      })
      this.$toast.success('关注成功...')
    },
    // 取关作者👇
    async quXiaoGuanZhu () {
      // this.detailObj.is_followed文章作者是否被当前用户关注了，false就是没关注
      this.detailObj.is_followed = false
      // 发送取关作者的Id
      await quGuan(this.zuoZheId)
    },
    // 点赞文章👇
    async zanWenZhang () {
      this.detailObj.attitude = 1
      await dianZanWenZhang({
        target: this.wenZhangId
      })
      this.$toast.success('点赞成功...')
    },
    // 取消点赞文章👇
    async BuZanWenZhang () {
      this.detailObj.attitude = -1
      await quXiaoZan(this.wenZhangId)
    },
    // 不喜欢文章👇
    async buXixHuanWenZhang () {
      this.detailObj.attitude = 0
      await buXuHuan({
        target: this.wenZhangId
      })
      this.$toast.success('已踩文章')
    },
    // 取消不喜欢文章👇
    async quXiaoBuXixHuanWenZhang () {
      this.detailObj.attitude = -1
      await quXiaoBuXiHuan(this.wenZhangId)
    },
    // 获取文章评论👇
    async deDaoPingLun () {
      var res = await getPingLun({
        type: 'a',
        // 👇文章Id👇
        source: this.id
      })
      // window.console.log(res.data)
      this.plObj = res.data
      this.plArr = res.data.results
      if (this.plArr.length >= res.data.results.length) {
        this.finished = true
      }
      this.loading = false
      window.console.log(this.plArr)
      // window.console.log(this.plArr)
    },
    // 下拉刷新评论👇
    onLoad () {
      this.deDaoPingLun()
    },
    // 添加评论👇
    async tianJiaPingLun () {
      await setPingLun({
        target: this.id,
        content: this.sms
      })
      this.sms = ''
      this.deDaoPingLun()
      // window.console.log(res)
    },
    // 回复当前评论👇
    async huiFuDangQianPl () {
      await setPingLun({
        target: this.plId.toString(),
        content: this.sms2,
        id: this.id
      })
      this.sms2 = ''
      this.kaiQipl(this.plId)
      this.deDaoPingLun()
      this.show = false
      this.$toast.success('回复成功')
    },
    // 对评论或评论回复点赞👇
    async dianZanPingLun (dianZanId) {
      await getZanpl({
        target: dianZanId
      })
      this.deDaoPingLun()
    },
    // 取消对评论或评论回复点赞👇
    async quXiaoDianZanpl (dianZanId) {
      // trycatch：不报错就执行try里的代码，报错了就执行catch里的代码，这里catch是空
      try {
        await clearDianZan(dianZanId)
      } catch (error) {}
      this.deDaoPingLun()
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  margin-bottom: 50px;
  /deep/ .van-nav-bar {
    background-color: #3296fa;
    .van-nav-bar__title {
      color: #ffffff;
    }
    .van-icon-arrow-left::before {
      color: #ffffff;
    }
  }
  .biaoTi > h4 {
    text-align: center;
    font-weight: 400;
    padding: 20px;
  }
  .zuoZhe {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    .zuoZhe-left {
      display: flex;
      justify-content: flex-start;
      .zuoZhe-img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 6px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .zuoZhe-name {
        line-height: 15px;
        font-size: 14px;
        color: #a1a1a1;
        padding-top: 12px;
      }
    }
    .zuoZhe-right {
      padding-top: 8px;
      /deep/ .van-button {
        background-color: #1989fa;
      }
    }
  }
  .neiRong {
    width: 100vw;
    overflow-x: hidden;
    margin-top: 25px;
    padding-left: 22px;
    padding-right: 22px;
    font-size: 16px;
    word-wrap: break-word;
    /deep/ pre {
      white-space: pre-wrap;
    }
    /deep/ img {
      width: 100%;
    }
  }
  .zan {
    margin-top: 25px;
    padding-bottom: 66px;
    display: flex;
    justify-content: space-around;
    /deep/ .van-button {
      width: 116px;
      height: 30px;
      border-radius: 16px;
    }
  }
  .pingLun {
    display: flex;
    justify-content: space-between;
    padding: 22px;
    padding-bottom: 42px;
    font-size: 12px;
    .pingLun-img {
      width: 80px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 4px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .pingLunText {
      .pltop {
        display: flex;
        justify-content: space-between;
        .pltop-name {
          font-size: 14px;
          color: #a1a1a1;
        }
        .pltop-like {
          font-size: 14px;
        }
      }
      .plcenter {
        width: 278px;
        font-size: 16px;
      }
      .plbottom {
        .plbottom-time {
          line-height: 44px;
          margin-right: 10px;
        }
        /deep/ .van-button {
          font-size: 12px;
          width: 70px;
          height: 24px;
          border-radius: 16px;
          text-align: center;
          background-color: rgb(177, 177, 177);
        }
      }
    }
  }
  /deep/ .van-field {
    position: fixed;
    left: 0;
    bottom: 0;
    padding-left: 22px;
    padding-right: 22px;
  }
}
</style>
